<template>
  <s-layout title="" :bgStyle="{ color: '#fff' }">
    <s-empty
      v-if="state.list.length === 0"
      text="购物车空空如也,快去逛逛吧~"
      icon="/static/cart-empty.png"
    />

    <!-- 头部 -->
    <view class="cart-box ss-flex ss-flex-col ss-row-between" v-if="state.list.length">
      <view class="container ss-flex ss-col-center ss-p-x-30" :class="{'container-user-center':props.forUserCenter}">
        <view class="header-left ss-flex ss-col-center ss-font-32">
          共
          <text class="goods-number ui-TC-Main ss-flex">
            {{ state.list.length }}
          </text>
          件商品
        </view>
        <view class="ss-flex-1"></view>
        <view class="header-right  ss-font-32">
          <button v-if="state.editMode" class="ss-reset-button" @tap="onChangeEditMode(false)">
            取消
          </button>
          <button v-else class="ss-reset-button ui-TC-Main" @tap="onChangeEditMode(true)">
            编辑
          </button>
        </view>
      </view>
      <!-- 内容 -->
      <view class="container cart-header2 ss-flex ss-flex-nowrap" :class="{'container-user-center': props.forUserCenter}">
        <view class="" style="width:100px">全选</view>
        <view class="" style="width:200px">图片</view>
        <view class="" style="flex-grow:1">名称</view>
        <view class="" style="width:100px">数量</view>
        <view class="" style="width:100px">合计</view>
      </view>
      <view class="container cart-content ss-flex ss-flex-col ss-flex-1 ss-p-x-30 ss-m-b-40" :class="{'cart-content-user-center':props.forUserCenter, 'container-user-center':props.forUserCenter}">
        <view class="goods-box ss-flex ss-r-10 ss-m-b-30" v-for="item in state.list" :key="item.id">
            <label class="check-box ss-flex ss-p-l-10" style="width: 80px;flex-shrink: 0;" @tap="onSelectSingle(item.id)">
              <radio
                :checked="state.selectedIds.includes(item.id)"
                color="var(--ui-BG-Main)"
                style="transform: scale(0.8)"
                @tap.stop="onSelectSingle(item.id)"
              />
            </label>
            <view v-if="item.status === 'down' && !state.editMode" class="down-box">
              该商品已下架
            </view>
            <s-goodscart-item-pc
              style="flex-grow:1;flex-shrink:0"
              :title="item.goods.title"
              :img="item.sku_price.image || item.goods.image"
              :price="item.sku_price.price"
              :skuText="item.sku_price.goods_sku_text"
              priceColor="#FF3000"
              :titleWidth="400"
            />
            <su-number-box
              style="width:120px;flex-shrink:0"
              :min="0"
              :max="item.sku_price.stock"
              :step="1"
              v-model="item.goods_num"
              @change="onNumberChange($event, item)"
            />
            <view style="width:110px;flex-shrink:0">
              ￥{{ item.sku_price.price * item.goods_num }}
            </view>
          </view>
      </view>
      <!-- 底部 -->
      <view class="cart-bottom" :class="{'cart-bottom-user-center':props.forUserCenter}" v-if="state.list.length > 0">
        <view class="cart-footer container ss-flex ss-row-between ss-p-x-30">
          <view class="footer-left ss-flex ss-col-center">
            <label class="check-box ss-flex ss-col-center ss-p-r-30" @tap="onSelectAll">
              <radio
                :checked="state.isAllSelected"
                color="var(--ui-BG-Main)"
                style="transform: scale(0.8)"
                @tap.stop="onSelectAll"
              />
              <view class="ss-m-l-8"> 全选 </view>
            </label>
            <text>合计：</text>
            <view class="text-price price-text">
              {{ state.totalPriceSelected }}
            </view>
          </view>
          <view class="footer-right">
            <button
              v-if="state.editMode"
              class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
              @tap="onDelete"
            >
              删除
            </button>
            <button
              v-else
              class="ss-reset-button ui-BG-Main-Gradient pay-btn ui-Shadow-Main"
              @tap="onConfirm"
            >
              去结算
              {{ state.selectedIds?.length ? `(${state.selectedIds.length})` : '' }}
            </button>
          </view>
        </view>
      </view>
    </view>
  </s-layout>
</template>

<script setup>
  import sheep from '@/sheep';
  import { computed, reactive, unref } from 'vue';
  import { onShow } from '@dcloudio/uni-app';
  import { showAuthModal, closeAuthModal } from '@/sheep/hooks/useModal';
  import SLayout from '@/sheep/components/s-layout/s-layout.vue';
  import SGoodscartItemPc from '@/sheep/components/s-goods-item/s-goodscart-item-pc.vue';
  const sys_navBar = sheep.$platform.navbar;
  const cart = sheep.$store('cart');

  const props = defineProps({
    forUserCenter: {
      type: Boolean,
      default: false,
    },
  });

  const state = reactive({
    editMode: computed(() => cart.editMode),
    list: computed(() => cart.list),
    selectedList: [],
    selectedIds: computed(() => cart.selectedIds),
    isAllSelected: computed(() => cart.isAllSelected),
    totalPriceSelected: computed(() => cart.totalPriceSelected),
  });

  // 单选选中
  function onSelectSingle(id) {
    cart.selectSingle(id);
  }

  // 编辑、取消
  function onChangeEditMode(flag) {
    cart.onChangeEditMode(flag);
  }

  // 全选
  function onSelectAll() {
    cart.selectAll(!state.isAllSelected);
  }

  // 结算
  function onConfirm() {
    let goods_list = [];
    state.selectedList = state.list.filter((item) => state.selectedIds.includes(item.id));
    state.selectedList.map((item) => {
      goods_list.push({
        goods_id: item.goods_id,
        goods_num: item.goods_num,
        goods_sku_price_id: item.goods_sku_price_id,
      });
    });
    if (goods_list.length === 0) {
      sheep.$helper.toast('请选择商品');
      return;
    }
	
	sheep.$store('user').getInfo()
	.then((resinfo) => {
		//if(1)
		if(resinfo.mobile)
		{
			sheep.$router.go('/pages/order/confirm', {
			  data: JSON.stringify({
			    order_type: 'goods',
			    goods_list,
			    from: 'cart',
			  }),
			});
		}
		else
		{
			sheep.$store('modal').$patch((state) => {
			  state.auth = '';
			  setTimeout(() => {
			    showAuthModal('changeMobile');
			  }, 100);
			  
			});
		}
	});
}

function onNumberChange(e, cartItem) {
  if (e === 0) {
    cart.delete(cartItem.id);
    return;
  }
  if (cartItem.goods_num === e) return;
  cartItem.goods_num = e;
  cart.update({
    goods_id: cartItem.goods_id,
    goods_num: e,
    goods_sku_price_id: cartItem.goods_sku_price_id,
  });
}
function onDelete() {
  cart.delete(state.selectedIds);
}

function getCartList() {
  cart.getList();
}

onShow(() => {
  getCartList();
});
</script>

<style lang="scss" scoped>
  :deep(.ui-fixed) {
    height: 72rpx;
  }

  .container-user-center {
    width: 100% !important
  }

  .cart-box {
    width: 100%;

    .cart-header {
      height: 70rpx;
      background-color: #f6f6f6;
      width: 100%;
      position: fixed;
      left: 0;
      top: v-bind('sys_navBar') rpx;
      z-index: 1000;
      box-sizing: border-box;
    }
    .cart-header2{
      height: 100rpx;
      background-color: #f6f6f6;
      width: 100%;
      top: v-bind('sys_navBar') rpx;
      box-sizing: border-box;
      font-size: 28rpx;

      &.cart-header2-user-center {
        width: 100% !important;
      }
    }

    .cart-bottom {
      display: flex;
      align-items: center;
      position: fixed;
      bottom: 0;
      left: 0;
      background-color: #fff;
      box-shadow: 0 0 8px 0 rgba(0,0,0,.1);
      width: 100%;
      height: 100px;
      z-index: 1000;

      &.cart-bottom-user-center {
        position: relative;
        box-shadow: none;
      }
    }

    .cart-footer {
      width: 100%;
      height: 100rpx;
      background-color: #fff;

      .pay-btn {
        width: 90px;
        height: 35px;
        font-size: 14px;
        line-height: 14px;
        font-weight: 500;
        border-radius: 5px;
      }

      &::after {
        content: none;
      }
    }

    .cart-content {
      margin-top: 70rpx;
      margin-bottom: 100px;

      &.cart-content-user-center {
        margin-bottom: 0;
      }

      .goods-box {
        width: 100%;
        background-color: #fff;
        position: relative;
      }
      // 下架商品
      .down-box {
        position: absolute;
        left: 0;
        top: 0;
        width: 100%;
        height: 100%;
        background: rgba(#fff, 0.8);
        z-index: 2;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #999;
        font-size: 32rpx;
      }
    }
  }
</style>
